<template>
  <view class="body">
    <view class="header">
      <view class="is_login" v-if="userInfo.nickName">
        <image class="background" :src="userInfo.avatarUrl" mode="aspectFill" />
        <image class="avatar" :src="userInfo.avatarUrl" mode="" />
        <text class="nickname">{{ userInfo.nickName }}</text>
      </view>
      <button
        class="not_login"
        open-type="getUserInfo"
        @getuserinfo="getUserInfo"
        v-else
      >
        登录
      </button>
    </view>
    <view class="main_nav">
      <view class="await_money">
        <view class="iconfont icondaifukuan"></view>
        <view class="text">待付款</view>
      </view>
      <view class="await_goods">
        <view class="iconfont icondaishouhuo"></view>
        <view class="text">待收货</view>
      </view>
      <view class="return_goods">
        <view class="iconfont icontuikuan"></view>
        <view class="text">退货/退款</view>
      </view>
      <view class="all_order">
        <view class="iconfont iconquanbudingdan"></view>
        <view class="text">全部订单</view>
      </view>
    </view>
    <view class="utils">
      <view class="service" @tap="callService">
        <view class="iconfont iconmine_icon_customer"></view>
        <text class="text">联系客服</text>
        <view class="content"> 1008611 </view>
      </view>
    </view>
    <view class="logout" v-if="userInfo.nickName" @tap="logout">
      <view class="iconfont icontuichu"></view>
      <text class="text">退出登录</text>
    </view>
  </view>
</template>

<script>
import { login } from "@/api/user";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  onLoad() {
    this.userInfo = uni.getStorageSync("userInfo") || {};
  },
  methods: {
    async getUserInfo(e) {
      if (e.detail.errMsg.indexOf("ok") > -1) {
        try {
          const { encryptedData, iv, rawData, signature, userInfo } = e.detail;
          const [, { code }] = await uni.login();
          const data = { encryptedData, iv, rawData, signature, code };
          const { token } = (await login(data)).data.message;
          uni.setStorageSync("token", token);
          uni.setStorageSync("userInfo", userInfo);
          this.userInfo = userInfo;
          uni.showToast({
            title: "登录成功",
            icon: "none",
          });
        } catch (error) {
          uni.showToast({
            title: "登录失败,请稍后重试",
            icon: "none",
          });
        }
      }
    },
    callService() {
      uni.makePhoneCall({
        phoneNumber: "1008611",
      });
    },
    logout() {
      this.userInfo = {};
      uni.removeStorageSync("token");
      uni.removeStorageSync("userInfo");
       uni.showToast({
            title: "已退出登录",
            icon: "none",
          });
    },
  },
};
</script>

<style lang="less">
.body {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background-color: #f9f9f9;
  .header {
    width: 100%;
    height: 330rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .not_login {
      width: 352rpx;
      height: 88rpx;
      color: #fff;
      font-size: 40rpx;
      line-height: 88rpx;
      background-color: var(--main_color);
    }

    .is_login {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      .background {
        position: absolute;
        left: 0;
        right: 0;
        width: 140%;
        height: 140%;
        left: -20rpx;
        top: -20rpx;
        z-index: 0;
        filter: blur(14rpx);
      }
      .avatar {
        width: 172rpx;
        height: 172rpx;
        border-radius: 50%;
        position: absolute;
        z-index: 1;
      }
      .nickname {
        color: #fff;
        font-size: 30rpx;
        margin-top: 14rpx;
      }
    }
  }
  .main_nav {
    margin: 20rpx;
    background-color: #fff;
    height: 144rpx;
    display: flex;
    justify-content: space-evenly;
    border-radius: 10rpx;
    .await_money,
    .await_goods,
    .return_goods,
    .all_order {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      height: 144rpx;
      .iconfont {
        font-size: 60rpx;
        color: #474747;
      }
      .text {
        font-size: 26rpx;
        color: #474747;
      }
    }
  }
  .utils {
    margin: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
    padding: 20rpx;
    .service {
      display: flex;
      height: 100rpx;
      align-items: center;
      .iconfont {
        font-size: 40rpx;
        color: #434343;
        padding: 0 10rpx;
      }
      .text {
        font-size: 26rpx;
        color: #434343;
        padding: 0 10rpx;
      }
      .content {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        font-size: 26rpx;
        color: #434343;
        padding: 0 10rpx;
      }
    }
  }
  .logout {
    margin: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
    padding: 20rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    .iconfont {
      font-size: 43rpx;
      color: #434343;
      padding: 0 10rpx;
    }
    .text {
      font-size: 26rpx;
      color: #434343;
      padding: 0 10rpx;
    }
  }
}
</style>